<template>
  <div style="padding: 20px; height: 750px">
    <div style="display: flex">
      <a-breadcrumb
        style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
      >
        <a-breadcrumb-item>电表管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-table
      :dataSource="elecInfoList"
      :row-key="(record) => record.elec_meter_id"
      :columns="columns"
      bordered
    >
    </a-table>
  </div>
</template>
  
<script setup>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive, computed, nextTick, createVNode } from "vue";
//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";
//引入函数，用于向服务端发送get请求
import { get, del, post, getBlob, put, tip, removeLocalToken } from "@/common";

const columns = [
  {
    title: "电表ID",
    dataIndex: "elec_meter_id",
  },
  {
    title: "总电量/kWh",
    dataIndex: "ea",
  },
  {
    title: "正向电量/A",
    dataIndex: "ef",
  },
  {
    title: "反向电量/A",
    dataIndex: "er",
  },
  {
    title: "电压/V",
    dataIndex: "v",
  },
  {
    title: "电流/A",
    dataIndex: "a",
  },
  {
    title: "瞬时有功功率/w",
    dataIndex: "pia",
  },
  {
    title: "瞬时无功功率/var",
    dataIndex: "pir",
  },
  {
    title: "瞬时视在功率/w",
    dataIndex: "pi",
  },
  {
    title: "功率因数",
    dataIndex: "pf",
  },
];

// 获取电表信息
const elecInfoList = ref([]);
const getElecInfo = () => {
  get("/manager/elecMeter/info").then((res) => {
    console.log(res);
    elecInfoList.value = res.data;
  });
};

const visible = ref(false);
const addElecParam = reactive({
  elec_meter_id: "",
});
const addElec = () => {
  if (addElecParam.elec_meter_id.trim().length == 0) {
    tip.warn("输入不可为空");
    return;
  }
  post("/manager/elecMeter/add", addElecParam).then((res) => {
    tip.success(res.data);
    getElecInfo();
    visible.value = false;
  });
};
const delElec = (elec_meter_id) => {
  del("/manager/elecMeter/del", { elec_meter_id: elec_meter_id }).then(
    (res) => {
      tip.success(res.data);
      getElecInfo();
    }
  );
};

// 一行有24列
const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 20,
};
getElecInfo();
</script>